/**********************************/
/********    LIGHTBOX   ***********/
/**********************************/

/* lightbox */
#modalScrollingContainer { top:0; right:0; bottom:0; left:0; overflow: auto; z-index:16000; position:fixed; -webkit-overflow-scrolling: touch; }

.lightbox {
    background:#fff;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    -moz-box-shadow:0 0 40px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow:0 0 40px 0 rgba(0,0,0,0.2);
    box-shadow:0 0 40px 0 rgba(0,0,0,0.2);
    font-size:14px;
    color:#333;    
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.iconclosemodal { position:absolute; width:35px; height:35px; top:20px; right:18px; background:url(../images/assets/sprite-closemodal-flat-2.png) 0 0 no-repeat; cursor:pointer; z-index:2; background-color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.iconclosemodal:hover { background-position:0 -50px; }
.iconclosemodal.iconclosemodal-light { position:absolute; width:35px; height:35px; top:20px; right:18px; background:url(../images/assets/sprite-closemodal-flat-2_light.png) 0 0 no-repeat; cursor:pointer; z-index:2; background-color: transparent; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.iconclosemodal.iconclosemodal-light:hover { background-position:0 -50px; }
.lightbox.white .iconclosemodal, .lightbox.store-item-confirmation .iconclosemodal {
    top:3px; right:2px;
    background:url(../images/assets/sprite-closemodal-flat-2_whitemodal.png) 0 0 no-repeat;
    background-color:transparent;
}
.lightbox.white .iconclosemodal-light {
    top:3px; right:2px;
    background:url(../images/assets/sprite-closemodal-flat-2_light.png) 0 0 no-repeat;
    background-color:transparent;
}
.lightbox.white .iconclosemodal:hover, .lightbox.store-item-confirmation .iconclosemodal:hover, .lightbox.white .iconclosemodal-light:hover { background-position:0 -50px; }

/* default lightbox */
.lightbox.default > section > header {
    position:relative;
    border-bottom:solid 1px #d9d9d9;    
    padding:20px;
    font-size:14px;
}
.lightbox.default header h2 { font-size:22px; font-weight:normal; line-height:35px; margin:0; vertical-align:middle; }
.lightbox.default header h2 .popover-content { font-size:14px; line-height:20px; }
.lightbox.default header h4 { margin:0 0 0 15px; vertical-align:middle; color:#888; }
.lightbox.default .contentwrapper { padding:20px; background:#ececec; }
.lightbox.default .contentwrapper > .content {
    background:#fff;
    -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;    
    margin-top:20px;
 }
 .lightbox.default .contentwrapper .content h3 { font-size:20px; font-weight:normal; }
 
.lightbox.default .contentwrapper .content:first-child { margin-top:0; }
.lightbox.nofooter .contentwrapper { -moz-border-radius: 0px 0px 12px 12px; -webkit-border-radius: 0px 0px 12px 12px; border-radius: 0px 0px 12px 12px; }
.lightbox.noheader .contentwrapper { -moz-border-radius: 12px 12px 0px 0px; -webkit-border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px; }
.lightbox.noheader-nofooter .contentwrapper { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.lightbox.default .footerwrapper { border-top:solid 1px #d9d9d9; height:75px; }
.lightbox.default .footer { padding:20px; position:relative;  }
.lightbox.default .footer .left { position:absolute; left:20px; top:20px; }
.lightbox.default .footer .right { position:absolute; right:20px; top:20px; }
.lightbox.default .footer .progressindicator { float:left; margin-top:10px; }
.lightbox.default .footer .left *, .lightbox.default .footer .right * { vertical-align:middle; }
.lightbox.default .footer .right .button { float:left; margin-left:10px; } /* legacy */
.lightbox.default .footer .right .btn { margin-left:5px; }
.lightbox.default .footer .left .button { float:left; margin-right:10px; } /* legacy */
.lightbox.default .footer .left .btn { margin-right:5px; }
.lightbox.default .footer .button, .lightbox.default .footer .btn { text-align:center; min-width:60px; }
.lightbox.default .footer.centered { text-align:center; }
.lightbox .utilities { padding:10px 0 0 0; }
.lightbox .content.center { text-align:center; }
.lightbox.default .contentdescription { padding-bottom:20px; border-bottom:solid 1px #d4d4d4; margin-bottom:5px; }
.lightbox.default .contentwrapper .content > header, .lightbox.default .contentwrapper .content header.border { font-size:16px; font-family:'montserrat',Arial,sans-serif; font-weight: normal; border-bottom:solid 1px #d4d4d4; margin-bottom:15px; padding-bottom:15px;  }
.lightbox.default .contentwrapper .content > header.containsdescription { border-bottom:0; padding-bottom:0px;  }
.lightbox.default .contentwrapper .content p { padding-bottom:15px; }
.lightbox textarea { resize: none; }

/* white lightbox */
.lightbox.white header h2 { font-size:39px; font-weight:normal; line-height:49px; }
.lightbox.white header h2.md { font-size:30px; font-weight:normal; line-height:49px; }
.lightbox.white header h3 { font-size:23px; font-weight:normal; line-height:29px; padding:0 20px; margin-bottom:20px; }
.lightbox.white h4 { font-size:17px; font-weight:normal; line-height:23px; }
.lightbox.white .content { padding:30px; }

/* lightbox options */
.lightbox.centered { text-align:center; }
.lightbox .footer .btn { min-width:80px; }

/*
.lightbox.centered .buttons { text-align:center; }
.lightbox.centered .buttons .button { margin-right:10px; }
.lightbox.centered .buttons .button.last { margin-right:0; }
.lightbox.centered .button { margin-bottom:20px; }
.lightbox.fullheightpanel .contentwrapper { position:relative; }
.lightbox.fullheightpanel .contentwrapper .panel { position:absolute; top:30px; left:30px; right:30px; bottom:30px; overflow-x:hidden; overflow-y:auto; }
*/

/* more lightbox */
.lightbox-primary-actions { padding:15px 0; border-top:solid 1px #d4d4d4; }
.lightbox-primary-actions a { margin-right:10px; display:inline-block; }
.lightbox-secondary-actions { padding:15px 0 0 0; display:block; }
.lightbox-secondary-actions a { margin-right:10px; display:inline-block; }

/* fullscreen lightbox */
.lightbox.fullscreen { top:30px !important; left:30px !important; right:30px !important; bottom:30px !important; width:auto !important; height:auto !important; position: fixed !important; background:#ececec; }
.lightbox.fullscreen .footerwrapper { position:absolute; bottom:0; left:0; right:0; background:#fff; -webkit-border-radius: 0 0 12px 12px ; border-radius: 0 0 12px 12px; } /* height:75px */
.lightbox.fullscreen > section > header { background:#fff; -webkit-border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; }


/* 2 col lightbox for left menu and content on right side */
.lightbox.twocol > section > header { height:75px; }
.lightbox.twocol .contentwrapper { position:absolute; top:75px; bottom:75px; left:0; right:0;  }
.lightbox.twocol .rightcol { position:absolute; top:0; right:0; bottom:0; left:258px; margin:0 auto; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; background:#ededed; }
.lightbox.twocol .leftcol { position:absolute; left:0; top:0; bottom:0; width:258px; background:#f9fafb; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; padding-bottom:60px; border-right:1px solid #cccccc; }
.lightbox.twocol .leftcol .nav-pills > li > a {
    border-radius:0;
}

@media (max-width: 768px) {
    
    .lightbox.fullscreen {
        top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; /* remove 30px buffer */
    }

    .lightbox.fullscreen header {
        -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; /* when 30px buffer is removed, also remove rounded corners of header */
    }

    .lightbox.default > section > header { 
        padding:10px;
    }
    .lightbox.default header h2 { font-size:18px; }
    .lightbox.twocol > section > header { height:55px; }
    .iconclosemodal {
        top: 10px;
        right: 8px;
    }
    .lightbox.default .footer .right {
        right: 10px;
        top: 10px;
    }
    .lightbox.fullscreen .footerwrapper {
        -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; /* when 30px buffer is removed, also remove rounded corners of footer */
    }

    .lightbox.twocol.twocol-responsive .footer .right {
        position: absolute;
        right: 9px;
        top: 10px;
    }

    .lightbox.default .footerwrapper {
        height:55px;
    }

    .lightbox.twocol .contentwrapper {
        bottom:55px;
        top:55px;
    }

    /* move leftcol to a horizontal bav bar */
    .lightbox.twocol.twocol-responsive .leftcol {
        bottom:auto;
        height:auto;
        width:100%;
        position:static;
        overflow-x:auto;
        overflow-y:visible;
        border-right:0;
        padding:10px;
        -webkit-overflow-scrolling: touch;
    }
    
    /* move main content pain below horizontal nav bar */
    .lightbox.twocol.twocol-responsive .rightcol {
        bottom:0;
        top:40px;
        left:0;
        width:100%;
        right:0;
    }

    /* bootstrap navbar should be setup to scroll (combined with css on .leftcol) */
    .nav-tabs, .nav-pills {
      white-space: nowrap;
      overflow-x: visible;
      overflow-y: visible;
    }

    /* pill shouldn't float so they can be in scrolling bar */
    .nav-tabs > li, .nav-pills > li {
      float: none;
      display: inline-block;
    }

    /* give pills rounded corners - when they are in the left navbar they do not have rounded corners */
    .lightbox.twocol .leftcol .nav-pills > li > a {
        border-radius:4px;
    }
}